import { useNamespace } from '@ibiz-template/vue3-util';
import { IPanelRawItem } from '@ibiz/model-core';
import { computed, defineComponent, PropType } from 'vue';
import { PanelRawItemController } from './panel-rawitem.controller';
import './panel-rawitem.scss';

export const PanelRawItem = defineComponent({
  name: 'IBizPanelRawItem',
  props: {
    modelData: {
      type: Object as PropType<IPanelRawItem>,
      required: true,
    },
    controller: {
      type: PanelRawItemController,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('panel-rawitem');

    // 类名控制
    const classArr = computed(() => {
      const { id } = props.modelData;
      const result: Array<string | false> = [ns.b(), ns.m(id)];
      result.push(...props.controller.containerClass);
      return result;
    });

    return {
      ns,
      classArr,
    };
  },
  render() {
    // 动态控制显示
    if (!this.controller.state.visible) {
      return;
    }
    return (
      <div class={this.classArr}>
        <iBizRawItem rawItem={this.modelData}></iBizRawItem>
      </div>
    );
  },
});
